<template>
  <el-card>
    <el-form size="large" :inline="true">
      <el-form-item label="一级分类">
        <el-select
          style="width: 240px"
          @change="c1Change"
          v-model="useproductCategoryStore.c1Id"
          :disabled="btnNumber == 1 ? true : false"
        >
          <el-option
            v-for="c1 in useproductCategoryStore.c1Data"
            :key="c1.id"
            :label="c1.name"
            :value="c1.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类"
        ><el-select
          style="width: 240px"
          @change="c2Change"
          v-model="useproductCategoryStore.c2Id"
          :disabled="btnNumber == 1 ? true : false"
        >
          <el-option
            v-for="c2 in useproductCategoryStore.c2Data"
            :key="c2.id"
            :label="c2.name"
            :value="c2.id"
          ></el-option> </el-select
      ></el-form-item>

      <el-form-item label="三级分类">
        <el-select
          style="width: 240px"
          v-model="useproductCategoryStore.c3Id"
          :disabled="btnNumber == 1 ? true : false"
        >
          <el-option
            v-for="c3 in useproductCategoryStore.c3Data"
            :key="c3.id"
            :label="c3.name"
            :value="c3.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from "vue";
import productCategoryStore from "@/stores/category";

//获取select仓库

//何时请求一级分类仓库Api
const useproductCategoryStore = productCategoryStore();
onMounted(() => {
  useproductCategoryStore.getC1();
});
//一级分类select变化触发
//根据一级ID重新请求二级分类 数据
const c1Change = () => {
  //清楚缓存显示的数据,select的v-model存的是option的value值，显示的是对应的option的label，
  //v-model双向绑定，为空去option里找不到对应的value就显示v-model的空
  useproductCategoryStore.c2Id = "";
  useproductCategoryStore.c3Id = "";
  useproductCategoryStore.c3Data = [];
  useproductCategoryStore.getC2();
};
//二级分类select变化触发
//根据二级ID重新请求三级分类
const c2Change = () => {
  //清楚缓存显示的数据
  useproductCategoryStore.c3Id = "";
  useproductCategoryStore.getC3();
};
//跳转路由后清空仓库的所有数据
onUnmounted(() => {
  useproductCategoryStore.c1Id = "";
  useproductCategoryStore.c2Id = "";
  useproductCategoryStore.c3Id = "";
  useproductCategoryStore.c1Data = [];
  useproductCategoryStore.c2Data = [];
  useproductCategoryStore.c3Data = [];
});
defineProps(["btnNumber"]);
</script>

<style scoped></style>
